<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ include file="/WEB-INF/jsp/component/common.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
    <title>设备管理</title>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/lib/dataTables.bootstrap.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">
    <link rel="stylesheet" href="${newframe}/css/base/base.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/table.css" type="text/css">
    <link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">
    <%@ include file="/WEB-INF/jsp/component/commonBottom.jsp"%>
    <style>
        #upload_instrument {
            position: relative; /* 保证子元素的定位 */
            background: #eee;
            border: 1px solid #ccc;
            text-align: center;
            cursor: pointer;
        }

        #text {
            display: inline-block;
            margin-top: 5px;
            color: #666;
            font-family: "黑体";
            font-size: 18px;
        }

        #file {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%; /* 宽高和外围元素保持一致 */
            height: 100%;
            opacity: 0;
            -moz-opacity: 0; /* 兼容老式浏览器 */
            filter: alpha(opacity = 0); /* 兼容IE */
        }
        .wrap{
            position:relative;
        }
        .loading{
            width:100%;
            height:100%;
            position:absolute;
            left:0;
            top:0;
            /* z-index:-3; */

        }
        .loadingImg{
            width:50px;
            height:50px;
            position:absolute;
            top:330px;
            left:50%;
            margin-left:-25px;

        }
    </style>
    <script>
        function addInstr() {
            window.parent.showModelIframe(
                "${URL_BASE_TOUPDATEINSTRUMENT}?method=1", "详细内容", 800, 400);
        }
        function updateInstr() {
            var checkedArray = getCheckedArray();
            if (checkedArray.length != 1) {
                alert("请勾选一条数据修改");
                return;
            }
            window.parent.showModelIframe("${URL_BASE_TOUPDATEINSTRUMENT}?id="
                + checkedArray[0] + "&method=2", "详细内容", 800, 400);
        }
        function deleteInstr() {
            var checkedArray = getCheckedArray();
            var ids = "";
            if (checkedArray.length == 0) {
                alert("请勾选至少一项数据");
                return;
            } else {
                for (var i = 0; i < checkedArray.length; i++) {
                    ids += checkedArray[i] + ",";
                }
                ids = ids.substring(0, ids.length - 1);
            }
            var r = confirm("确定要删除勾选的数据吗?");
            if (r == true) {
                $.ajax({
                    url : '${URL_BASE_DELETEINSTRUMENT}',//删除地址
                    dataType : 'json',
                    type : 'post',
                    data : {
                        ids : ids
                    },
                    async : false, //默认为true 异步
                    error : function() {
                        alert('error');
                    },
                    success : function(data) {

                        if (!data.success) {
                            alert("刪除失敗，失敗原因：" + data.msg);
                        }
                        refreshTable();
                    }
                });
            }
        }
        function downTemplate() {
            window.location.href = "${newframe}/upload/template/instrumentTemplate.xlsx";
        }
        $(function() {
            $("#importModal").click(function() {
                ajaxFileUpload();
            });

            $('#fileModal').on('hide.bs.modal', function() {
                var xx = $("#file").val('');
            });
        });
        function showImage() {
            var val = $("#file").val();

            if (val == "") {
                alert("请选择要上传的文件！");
                return false;
            }
            var stuff = val.match(/^(.*)(\.)(.{1,8})$/)[3];
            if (stuff != "xls" && stuff != "xlsx" && stuff != "txt") {
                alert("文件类型不正确，请选择excel文件！");
                return false;
            }
            $(".content").html(val);
            $('#fileModal').modal('show');
        }
        function ajaxFileUpload() {
            $(".loading").show();
            //隐藏上传选项
            $.ajaxFileUpload({
                url : '${ctx}/instrument/upload', //用于文件上传的服务器端请求地址
                secureuri : false, //是否需要安全协议，一般设置为false
                fileElementId : 'file', //文件上传域的ID
                dataType : 'json', //返回值类型 一般设置为json
                success : function(data, status) //服务器成功响应处理函数
                {
                    if(data.success==true){
                        alert(data.msg);
                        refreshTable();
                    }else{
                        alert(data.msg);
                    }
                    $(".loading").hide();

                },
                error : function(data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            })
            return false;
        }
    </script>
</head>
<body>
<div class="wrap">
    <div class="page-header">
        <!-- /.page-header -->
        <ul class="page_nav">
            <li class="first cur">美康租赁平台&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li class="cur">基础信息&nbsp;&nbsp;&nbsp;&nbsp;&gt;&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li>设备管理</li>
        </ul>
    </div>
    <div class="form">

        <label>设备名称:</label>
        <select id="instrumentType" name="instrumentType" class="SN">
            <medi:configOpt name="instrumentName"/>
        </select>
        <label>设备SN:</label>
        <input id="instrumentSN" name="instrumentSN" type="text" class="SN" placeholder="设备SN">
        <label>设备状态:</label> <select
            id="instrumentStatus" name="instrumentStatus" class="SN">
        <medi:configOpt name="instrumentStatus" />
    </select> <input id="query" type="button" value="搜索" class="search"
                     onclick="refreshTable();"> <span class="clear"
                                                      onclick="cleanForm()">清除条件</span>
        <div></div>
    </div>
    <div id="tablepart">
        <table id="example" class="display" cellspacing="10" width="100%">
            <thead>
            <tr>
                <th><input id="all_id" type="checkbox"></th>
                <th>设备编号</th>
                <th>设备名称</th>
                <th>设备SN</th>
                <th>设备型号</th>
                <th>设备品牌</th>
                <th>设备状态</th>
                <th>所属医院</th>
            </tr>
            </thead>
        </table>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="fileModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">批量导入</h4>
                </div>
                <div class="modal-body">
                    <h4 class="content"></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="importModal" style="float:right;margin-right:10px;background: #35c990;border:none;">导入</button>
                </div>
            </div>
        </div>
    </div>

    <div class="loading" style="display: none;">
        <img src="${newframe }/images/slidebar/loading.gif" class="loadingImg">
    </div>



</div>

<script>
    var table;
    function initTable() {
        table = $('#example')
            .DataTable(
                {
                    "dom" : "<'row'<'col-xs-2'l><'#mytool.col-xs-10'><'col-xs-6'f>r>"
                    + "t"
                    + "<'row'<'col-xs-6'i><'col-xs-6'p>>",
                    "bFilter" : false,//去掉搜索框
                    "bAutoWidth" : true, //自适应宽度
                    "sPaginationType" : "full_numbers",
                    "ordering" : false,//是否允许Datatables开启排序
                    "bProcessing" : true,
                    "bServerSide" : true,
                    "sAjaxSource" : "${URL_BASE_SEARCHINSTRUMENT}",
                    "sAjaxDataProp" : "dataList",//查询后，返回的集合
                    "fnServerData" : function(sSource, aoData,
                                              fnCallback) { //查询条件
                        aoData.push({
                            "name" : "instrumentType",
                            "value" : $("#instrumentType").val()
                        }, {
                            "name" : "instrumentStatus",
                            "value" : $("#instrumentStatus").val()
                        }, {
                            "name" : "instrumentSN",
                            "value" : $("#instrumentSN").val()
                        });
                        $.ajax({
                            "dataType" : 'json',
                            "url" : sSource,
                            "type" : 'post',
                            "data" : aoData,
                            "success" : fnCallback
                        });

                    },

                    "aoColumns" : [
                        {
                            "targets" : -1,
                            "data" : null,
                            "fnCreatedCell" : function(nTd,
                                                       sData, oData, iRow, iCol) {
                                $(nTd)
                                    .html(
                                        ''
                                        + '&nbsp;&nbsp;<input name="id" value="'
                                        + oData.instrumentId
                                        + '" type="checkbox" onClick="isCheckedAll()">'
                                        + '');
                            }
                        },
                        {
                            "mDataProp" : "instrumentId"
                        },
                        {
                            "mDataProp" : "instrumentType"
                        },
                        {
                            "mDataProp" : "instrumentSN"
                        },
                        {
                            "mDataProp" : "instrmentVersion"
                        },
                        {
                            "mDataProp" : "instrumentBrand"
                        },
                        {
                            "targets" : 6,
                            "data" : null,
                            "fnCreatedCell" : function(nTd,
                                                       sData, oData, iRow, iCol) {
                                var configs = <medi:configJson name="instrumentStatus"/>;
                                $(nTd)
                                    .html(
                                        !configs[sData.instrumentStatus] ? ""
                                            : configs[sData.instrumentStatus]);
                            }
                        }, {
                            "mDataProp" : "hospShortName"
                        } ],
                    "createdRow" : function(row, data, index) {
                        $('td', row).eq(0).addClass('border_left');
                        $('td', row).eq(7).addClass('border_right');
                    },
                    "oLanguage" : {//插件的汉化
                        "sLengthMenu" : "每页显示 _MENU_ 条记录",
                        "sZeroRecords" : "抱歉， 没有找到",
                        "sInfo" : "当前显示 _START_ 到 _END_条 ,共 _TOTAL_ 条记录",
                        "sInfoEmpty" : "没有数据",
                        "sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
                        "oPaginate" : {
                            "sFirst" : "首页",
                            "sPrevious" : "上一页",
                            "sNext" : "下一页",
                            "sLast" : "末页"
                        },
                        "sZeroRecords" : "没有检索到数据",
                        "sProcessing" : "<img src='' />",
                        "sSearch" : "搜索"
                    },
                    "initComplete" : function() {
                        <shiro:hasPermission name="instrument:delete">
                        $("#mytool")
                            .append(
                                '<button id="delete_butt" type="button" class="btn btn-outline btn-success" onclick="deleteInstr()" style="float:right;margin-right:10px;background: #35c990;border:none;">删除</button>');
                        </shiro:hasPermission>
                        <shiro:hasPermission name="instrument:update">
                        $("#mytool")
                            .append(
                                '<button id="update_butt" type="button" class="btn btn-outline btn-success" onclick="updateInstr()" style="float:right;;margin-right:10px;background: #35c990;border:none;">修改</button>');
                        </shiro:hasPermission>
                        <shiro:hasPermission name="instrument:add">
                        $("#mytool")
                            .append(
                                '<button id="add_butt" type="button" class="btn btn-outline btn-success" onclick="addInstr()" style="float:right;;margin-right:10px;background: #35c990;border:none;">新增</button>');
                        </shiro:hasPermission>


                        /*                        <shiro:hasPermission name="instrument:add">
                        $("#mytool")
                            .append(
                                '<button id="down_template" type="button" class="btn btn-outline btn-success" onclick="downTemplate()" style="float:right;;margin-right:10px;background: #35c990;border:none;">下载模版</button>');
                        </shiro:hasPermission>
                        <shiro:hasPermission name="instrument:add">
                        $("#mytool")
                            .append(
                                '<button id="upload_instrument" type="button" class="btn btn-outline btn-success" style="float:right;;margin-right:10px;background: #35c990;border:none;"><input id="file" name="file" type="file" class="btn btn-primary btn-lg" data-toggle="modal" onchange="showImage();"/>批量导入</button>');
                        </shiro:hasPermission>*/
                    }
                });
    }
    $(document).ready(function() {
        initTable();
        $('#example tr th').eq(0).addClass('border_left');
        $('#example tr th').eq(7).addClass('border_right');
        $('#example tbody tr td').addClass('active');
        $('#example tr td').eq(7).addClass('border_right');
        $('#example_paginate').parent().addClass('pagewidth');
        $('#example_info').parent().addClass('showPage');
        $('#example_length').parent().addClass('pageNow');
    });
    //多选按钮
    $("#all_id").click(function() {
        if (this.checked) {
            $("input[name='id']").each(function() {
                $(this)[0].checked = true;
            });
        } else {
            $("input[name='id']").each(function() {
                $(this)[0].checked = false;
            });
        }
    });

    //判断是否已经全选
    function isCheckedAll() {
        var isCheckAll = true;
        $("input[name='id']").each(function() {
            if (!this.checked) {
                isCheckAll = false;
            }
        });
        if (isCheckAll) {
            $("#all_id")[0].checked = true;
        } else {
            $("#all_id")[0].checked = false;
        }
    }

    function getCheckedArray() {
        var checkedArray = [];
        $("input[name='id']").each(function() {
            if (this.checked) {
                checkedArray.push(this.value);
            }
        });
        return checkedArray;
    }
</script>
</body>
</html>